<ng-template #template>
  <div [class]="model.cssClasses.selectWrapper">
    <ng-container *ngIf="!model.isReadOnly">
      <div [class]="model.getControlClass()"  (click)="click($event)" (keyup)="keyup($event)"
        [attr.id]="model.inputId" 
        [attr.required]="model.isRequired" 
        [attr.tabindex]= "model.isInputReadOnly ? undefined : 0"
        [attr.disabled]="model.isInputReadOnly"
        [attr.role]="dropdownModel.ariaQuestionRole"
        [attr.aria-required]="dropdownModel.ariaQuestionRequired"
        [attr.aria-invalid]="dropdownModel.ariaQuestionInvalid"
        [attr.aria-errormessage]="dropdownModel.ariaQuestionErrorMessage" 
        [attr.aria-expanded]="dropdownModel.ariaQuestionExpanded"
        [attr.aria-label]="dropdownModel.ariaQuestionLabel" 
        [attr.aria-labelledby]="dropdownModel.ariaQuestionLabelledby"
        [attr.aria-controls]="dropdownModel.ariaQuestionControls"
      >
        <div [class]="model.cssClasses.controlValue">
          <sv-ng-string *ngIf="model.locReadOnlyText" [model]="model.locReadOnlyText"></sv-ng-string>
        </div>
      </div>
        <sv-ng-popup [popupModel]="model.popupModel"></sv-ng-popup>
    </ng-container>
    <div disabled *ngIf="model.isReadOnly" [class]="model.getControlClass()" [attr.id]="model.inputId">
      <sv-ng-string *ngIf="model.locReadOnlyText" [model]="model.locReadOnlyText"></sv-ng-string>
    </div>
  </div>
</ng-template>
